import './TextTemplate.scss'
import { useMount } from 'ahooks'
import { useRequest } from 'alova'
import { useEffect, useState } from 'react'

import { Http } from '../../Api'
import { stringToObject } from '../configFun'
import { ParamsMapping } from './BefaultParams'
import { ICONMapping } from '../../Utils/IconMapping'

export const TextTemplateA01 = ({ preview, HomeEvent, render, config }) => {

    const [Config, setConfig] = useState()
    const [Data, setData] = useState()
    const { send: getData } = useRequest(({ url, params }) => Http({ url, params }), { immediate: false })

    useMount(() => {
        if (preview) {
            const { api, params } = ParamsMapping.TextTemplateA01
            getData({ url: api, params: stringToObject(params) }).then(res => setData(res))
            setConfig(ParamsMapping.TextTemplateA01)
        }
    })

    useEffect(() => {
        if (!preview) {
            const { api, params } = config
            getData({ url: api, params: stringToObject(params) }).then(res => setData(res))
            setConfig(config)
        }
    }, [config])

    const onDragStart = () => HomeEvent.emit({ i: 'TextTemplateA01', w: 3, h: 2, minW: 2, minH: 2, maxW: 12, maxH: 2 })

    if (Config && Data) {
        const {
            mapping,
            iconRadio,
            iconSize,
            contColor,
            contFamily,
            contSize,
            contWeight,
            paraColor,
            paraFamily,
            paraSize,
            paraWeight,
            unitColor,
            unitFamily,
            unitSize,
            unitWeight
        } = Config

        return (
            <div className="TextTemplateA01">
                <div className='TempBox' draggable={render ? false : true} onDragStart={onDragStart}>
                    {mapping.map(({ icon, context, params, aftUnit, befUnit, back, color }, index) =>
                        <div
                            key={index}
                            style={{
                                '--iconBack': back,
                                '--iconColor': color,
                                '--iconRadio': iconRadio + 'px',
                                '--iconSize': iconSize + 'px',
                                '--contColor': contColor,
                                '--contFamily': contFamily,
                                '--contSize': contSize + 'px',
                                '--contWeight': contWeight,
                                '--paraColor': paraColor,
                                '--paraFamily': paraFamily,
                                '--paraSize': paraSize + 'px',
                                '--paraWeight': paraWeight,
                                '--unitColor': unitColor,
                                '--unitFamily': unitFamily,
                                '--unitSize': unitSize + 'px',
                                '--unitWeight': unitWeight
                            }}
                        >
                            {ICONMapping[icon]}
                            <div>{context}</div>
                            <div>
                                <span>{aftUnit}</span>
                                {Data[params]}
                                <span>{befUnit}</span>
                            </div>
                        </div>
                    )}
                </div>
            </div>
        )
    }
}

export const TextTemplateA02 = ({ preview, HomeEvent, render, config }) => {

    const [Config, setConfig] = useState()
    const [Data, setData] = useState()
    const { send: getData } = useRequest(({ url, params }) => Http({ url, params }), { immediate: false })

    useMount(() => {
        if (preview) {
            const { api, params } = ParamsMapping.TextTemplateA01
            getData({ url: api, params: stringToObject(params) }).then(res => setData(res))
            setConfig(ParamsMapping.TextTemplateA01)
        }
    })

    useEffect(() => {
        if (!preview) {
            const { api, params } = config
            getData({ url: api, params: stringToObject(params) }).then(res => setData(res))
            setConfig(config)
        }
    }, [config])

    const onDragStart = () => HomeEvent.emit({ i: 'TextTemplateA01', w: 3, h: 2, minW: 2, minH: 2, maxW: 12, maxH: 2 })

    if (Config && Data) {
        const {
            mapping,
        } = Config

        return (
            <div className="TextTemplateA01">
                <div className='TempBox' draggable={render ? false : true} onDragStart={onDragStart}>
                    第二版数据
                </div>
            </div>
        )
    }
}